<template>
	<div>
		<div class="navTop">
			<div class="name">{{infoName}}</div>
			<div class="email">{{infoEmail}}</div>
		</div>
		<div class="backNavList">
			<div class="navItem" v-for="item in navList" :key="item.id" @click="ClickOnNav(item.id)">
				<svg class="icon navIcon" aria-hidden="true">
					<use :xlink:href="item.navIcon"></use>
				</svg>
				<div class="navText">{{item.navText}}</div>
			</div>
			<div class="navItem" @click="goToLogin">
				<svg class="icon navIcon" aria-hidden="true">
					<use xlink:href="#icon-icon_login"></use>
				</svg>
				<div class="navText">退出登录</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {} from '../../assets/font/iconfont.js'
	export default {
		name: 'BackNavList',
		data() {
			return {
				infoName:'',
				infoEmail:'',
				navList: [
					{
						id: 1,
						navText: '后台首页',
						navIcon: '#icon-icon_inde'
					},
					{
						id: 2,
						navText: '新增文章',
						navIcon: '#icon-a-icon_mate'
					},
					{
						id: 3,
						navText: '文章列表',
						navIcon: '#icon-icon_mate'
					},
					{
						id: 4,
						navText: '链接列表',
						navIcon: '#icon-icon_link'
					},
					{
						id: 5,
						navText: '用户列表',
						navIcon: '#icon-icon_file'
					},
				],
			}
		},
		mounted() {
			this.infoName = window.localStorage.getItem('name');
			this.infoEmail = window.localStorage.getItem('email');
		},
		methods: {
			ClickOnNav(e) {
				switch (e) {
					case 1:
						this.$router.push("/Backindex"); // 跳转至后台首页
						break;
					case 2:
						this.$router.push("/addArticle"); // 跳转至新增文章
						break;
					case 3:
						this.$router.push("/articleList"); // 跳转至文章列表
						break;
					case 4:
						this.$router.push("/friendList"); // 跳转至友链列表
						break;
					case 5:
						this.$router.push("/userList"); // 跳转至用户列表
						break;
					default:
						this.$router.push("/Backindex"); // 跳转至首页
				}
			},
			goToLogin() {
				window.localStorage.removeItem('token');
				window.localStorage.removeItem('name');
				window.localStorage.removeItem('email');
				this.$router.push({
					path: '/index'
				})
			}
		},
	}
</script>

<style>
	@import url("../../assets/css/backStyle.css");
</style>
